<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 320px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" ref="chart"></div>
        <!-- <input v-model="date" type="date" @change="initEcharts()"/> -->
        <input v-model="date" type="date" />
        <input type="button" value="(开启|关闭)自动播放" @click="openOrClosePlay()">
    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import axios from "../../assets/axios/axios.js";
        import * as echarts from "../../assets/echarts/echarts.esm.js";
        createApp({
            data () {
                return {
                    date: "2022-01-01"
                }
            },
            watch: {
                date: {
                    async handler (nv) {
                        try {
                            let { data } = await axios.get("http://127.0.0.1:3000/api/getSales",{
                                params:{
                                    date:nv
                                }
                            });
                            if (!this.$myChart) {
                                this.$myChart = echarts.init(this.$refs.chart);
                            }
                            this.$myChart.setOption(data)
                        } catch (error) {
                            // ……
                        }
                    },
                    immediate: true
                }
            },
            methods: {
                // async initEcharts() {
                //     try {
                //         let { data } = await axios.get("http://127.0.0.1:3000/api/getSales",{
                //             params:{
                //                 date:this.date
                //             }
                //         });
                //         if(!this.$myChart){
                //             this.$myChart = echarts.init( this.$refs.chart );
                //         }
                //         this.$myChart.setOption(data)
                //     } catch (error) {

                //     }
                // },
                openOrClosePlay(){
                    if(this.$timer){
                        clearInterval(this.$timer)
                        this.$timer = null;
                    }else{
                        this.$timer = setInterval(()=>{
                            let tempDate = new Date(this.date)
                            // console.log( tempDate )
                            // console.log( tempDate.getMonth(),tempDate.getDate() )
                            tempDate.setDate( tempDate.getDate()+1 )
                            // console.log( tempDate.getMonth(), tempDate.getDate() )
                            // console.log( `${tempDate.getFullYear()}-${tempDate.getMonth()+1}-${tempDate.getDate()}` )
                            let year = tempDate.getFullYear();
                            let month = "0"+(tempDate.getMonth()+1);
                            let date = "0"+tempDate.getDate();
                            this.date = `${year}-${month.substr(-2,2)}-${date.substr(-2,2)}`;
                        },3000)
                    }
                }
            },
        }).mount("#app")
    </script>
</body>

</html>